window.addEventListener('load', function () {
    let apiTypeData = [
        { name: "全部", keyword: "身份证实名", isnew: false },
        { name: "生活服务", keyword: "银行卡", isnew: false },
        { name: "金融科技", keyword: "短信", isnew: false },
        { name: "交通地理", keyword: "天气", isnew: false },
        { name: "充值缴费", keyword: "短信", isnew: false },
        { name: "数据智能", keyword: "手机归属地", isnew: false },
        { name: "企业工商", keyword: "IP", isnew: false },
        { name: "应用开发", keyword: "手机归属地", isnew: false },
        { name: "电子商务", keyword: "IP", isnew: false },
        { name: "吃喝玩乐", keyword: "视频", isnew: false },
        { name: "文娱视频", keyword: "视频", isnew: false },
        { name: "免费接口大全", keyword: "短信", isnew: true },
        { name: "短信", keyword: "身份证实名", isnew: false },
        { name: "汽车", keyword: "银行卡", isnew: false },
        { name: "核验", keyword: "银行卡", isnew: false },
        { name: "最新发布", keyword: "银行卡", isnew: true },
        { name: "API私有化部署", keyword: "身份证实名", isnew: true },
    ];
    //遍历拼接html结构
    apiTypeData.forEach(function (v, i) {

        //将拼接的html结构添加到指定位置
        // getEle('#APIList').innerHTML += `<li class="${i==0 ?'active' :''}">${v.name}</li>`;

        // 原生方式

        // 创建节点
        let liDom = document.createElement('li');
        //判定给第一个元素添加效果
        if (i == 0) {
            liDom.className = 'active'
        }

        //添加属性保存每一条数据中的keyword
        liDom.setAttribute('title', v.keyword)

        //判定如果当前v.isnew==true给当前标签添加标签blod
        if (v.isnew == true) {
            liDom.className = 'bold';
        }
        // console.log(liDom.className);
        // 添加内容
        liDom.innerHTML = `${v.name}`;

        // 添加节点到指定位置
        getEle('#APIList').appendChild(liDom);

    })


    //点击APIList  给当前li添加active  把对应的值放到指定位置
    let APIListDom = getEle('#APIList')
    let APILis = getEleAll('#APIList li')

    APIListDom.addEventListener('click', function (e) {

        //如果ul>li中标签比较多，一般需要判定
        if (e.target.nodeName === 'LI') {

            //一刀切，清除所有li样式
            APILis.forEach(function (v) {
                v.classList.remove('active')
            })
            //给当前li绑定active
            e.target.classList.add('active')

            //获取标签中的内容放到 searchTitle
            getEle('#searchTitle').innerHTML = e.target.innerText;

            //获取当前标签上的title放到searchKey中的placeholder
            getEle('#searchKey').placeholder = e.target.title;


        }
    })



    let listDataArr = [
        //第一行
        { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
        { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
        { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
        { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
        { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
        //第二行
        { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
        { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
        { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
        { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
        { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
        //第三行
        { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
        { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
        { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
        { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
        { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
        //第四行
        { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
        { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
        { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
        { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
        { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    ];


    // listDataArr.forEach(function (v) {
    //     getEle('#apiContent').innerHTML += 
    //     `
    //         <li>
    //             <span class="font12 abs ${v.isSpecial?'on':''}">企业专用</span>
    //             <div class="tcenter mt50">
    //                 <img src="./img/${v.img}" alt="">
    //                 <h4 class="font12">${v.name}</h4>
    //                 <p class="${v.price=='免费'?'green':'red'} font14">${v.price}</p>
    //             </div>
    //             <a href="#">申请数据</a>
    //         </li>
    //     `
    // })


    //定义变量保存当前页码和当前显示的条数
    let currentPage = 0;
    let pageNum = 5;


    //封装渲染函数
    function rander(currentPage, pageNum) {
        //渲染之前清除之前的数据
        getEle('#apiContent').innerHTML = '';
        //截取展示的数据-分页数据
        let lisData = listDataArr.slice(currentPage, pageNum);

        //遍历listData，拼接html结构
        lisData.forEach(function (v) {
            //拼接html结构并放到指定位置
            getEle('#apiContent').innerHTML +=
                `
            <li>
                <span class="font12 abs ${v.isSpecial ? 'on' : ''}">企业专用</span>
                <div class="tcenter mt50">
                    <img src="./img/${v.img}" alt="">
                    <h4 class="font12">${v.name}</h4>
                    <p class="${v.price == '免费' ? 'green' : 'red'} font14">${v.price}</p>
                </div>
                <a href="#">申请数据</a>
            </li>
        `
        })
    }
    //当网页加载时，立马调用
    rander(currentPage, pageNum)


    //分页基本功能
    //获取Dom节点
    let changepage = getEleAll('#pages span')
    //设置点击事件
    changepage.forEach(function (v) {
        v.addEventListener('click', function () {

            //获取当前span中的内容
            let val = v.textContent;

            //判定当前val的值
            if (val == 1) {
                currentPage = 0;
            } else {
                currentPage = (val - 1) * pageNum;
            }
            rander(currentPage, val * pageNum)
            //调用渲染遮罩层方法
            displayMask();

            //调用跳转详情页
            imgHref();
        })
    })

    //调用渲染遮罩层方法
    displayMask();

    //调用跳转详情页
    imgHref();

    //获取DOM
    let tabBtns = getEleAll('.tab-box span')
    //遍历数组
    tabBtns.forEach(function (v, i) {
        //绑定点击事件
        v.addEventListener('click', function () {
            //遍历数组一刀切所有样式
            tabBtns.forEach(function (v) {
                v.className = '';
            })
            //给点击的对象添加样式
            this.className = 'on';


            //获取DOM节点
            let boxs = getEleAll('.form-box,.qrcode-box')

            //遍历DOM集合一刀切所有样式
            boxs.forEach(function (v, i) {
                v.style.display = 'none'
            })

            //展示当前tab对应的div 显示对应的样式
            boxs[i].style.display = 'block'

        })
    })



})





